<!-- 品牌管理 -->
<template>
  <div>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="所有品牌"
        name="first"
      >
        <el-card
          style="max-width: 100%;"
          class="card-table"
        >
          <search-box
            :tableDataInput="tableData"
            @search="handleSearch1"
          ></search-box>
          <el-button
            class="btn1"
            @click="addBrand"
          ><i
              class="el-icon-plus"
              style="margin-right: 3px;"
            ></i>品牌</el-button>

          <el-table
            :data="choosedItem"
            style="margin-top: 16px;font-size: 16px;"
            :header-cell-style="{ background: '#EBEEF2' }"
            row-key="id"
            default-expand-all
          >
            <el-table-column
              prop="logo"
              label="品牌LOGO"
              align="center"
              width="300%"
            >
              <template slot-scope="scope">
                <img
                  :src="scope.row.logo"
                  class="img-box"
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="brandName"
              label="品牌名称"
              align="center"
            />
            <el-table-column
              prop="letter"
              label="品牌首字母"
              align="center"
            />
            <el-table-column
              label="操作"
              width="300%"
            >
              <template slot-scope="scope">
                <div>
                  <span @click="edit(scope.$index,scope.row)">
                    <img
                      src="@/assets/edit.svg"
                      class="edit"
                    >
                    <span style="margin-left: 4px;">编辑</span>
                  </span>
                  <span @click="deleted(scope.$index,scope.row)">
                    <img
                      src="@/assets/delete.svg"
                      class="delete"
                    >
                    <span>删除</span>
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-pagination
          background
          layout="->,prev, pager,next,total"
          :page-size="3"
          :total="tableDataLength"
          @current-change="handleCurrentChange"
          style="margin-top: 20px;"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane
        label="品牌申请"
        name="second"
      > <el-card
          style="max-width: 100%;"
          class="card-table"
        >
          <search-box
            :tableDataInput="tableData"
            @search="handleSearch2"
          ></search-box>

          <el-button
            class="btn2"
            @click="reciver"
          >收录</el-button>
          <el-button
            class="btn1"
            @click="openrefuseDialog"
          >拒绝</el-button>

          <el-table
            :data="tableData"
            style="margin-top: 16px;font-size: 16px;"
            :header-cell-style="{ background: '#EBEEF2' }"
            row-key="id"
            @selection-change="handleSelectionChange"
            default-expand-all
          >
            <el-table-column
              type="selection"
              width="55"
            >
            </el-table-column>
            <el-table-column
              prop="logo"
              label="品牌LOGO"
              align="center"
              width="300%"
            >
              <template slot-scope="scope">
                <img
                  class="img-box"
                  :src="scope.row.logo"
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="brandName"
              label="品牌名称"
              align="center"
            />
            <el-table-column
              prop="letter"
              label="品牌首字母"
              align="center"
            />
            <el-table-column
              prop="status"
              label="状态"
              align="center"
            >
              <template slot-scope="scope">
                <div>{{ getstatus(scope.row.status) }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="300%"
            >
              <template slot-scope="scope">
                <div>
                  <span
                    v-show="scope.row.status !== 1"
                    @click="reciverBrand(scope.$index,scope.row)"
                  >
                    <img
                      src="@/assets/edit.svg"
                      class="edit"
                    >
                    <span style="margin-left: 4px;">收录</span>
                  </span>
                  <span
                    v-show="scope.row.status !== 1&&scope.row.status!== 2"
                    @click="refuse(scope.$index,scope.row)"
                  >
                    <img
                      src="@/assets/delete.svg"
                      class="delete"
                    >
                    <span>拒绝</span>
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-pagination
          background
          layout="->,prev, pager,next,total"
          :page-size="3"
          :total="tableDataLength"
          @current-change="handleCurrentChange2"
          style="margin-top: 20px;"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <div>
      <BrandaddDialog
        v-if="visible1"
        @close="handleClose"
        :visible.sync="visible1"
      ></BrandaddDialog>
    </div>
    <div>
      <BrandrefuseDialogVue
        v-if="visible2"
        @close="handleClose2"
        :Vrefused.sync="visible2"
        :id.sync="ids"
        :pageNo.sync="form.pageNo"
        @changeIds="changeIds"
      ></BrandrefuseDialogVue>
    </div>
    <div>
      <BrandeditDialog
        v-if="visible3"
        @close="handleClose3"
        :Vedit.sync="visible3"
        :pageNo.sync="form.pageNo"
        :Branddata.sync="selectedItems[0]"
      ></BrandeditDialog>
    </div>
  </div>

</template>
  
  <script>
import BrandaddDialog from "./test/components/BrandaddDialog.vue";
import "@/styles/tableList.css";
import { changeStatus, getbrandslist, deleteBrand ,batchChangeStatus } from "@/api/api";
import BrandrefuseDialogVue from "./test/components/BrandrefuseDialog.vue";
import BrandeditDialog from "./test/components/BrandeditDialog.vue";
export default {
  name: "Branding", //品牌管理
  components: {
    BrandaddDialog,
    BrandrefuseDialogVue,
    BrandeditDialog,
  },
  data() {
    return {
      selectedItems: [],
      choosedItem: [],
      tableData: [],
      activeName: "first",
      form: {
        brandName: "",
        pageNo: 1,
        pageSize: 3,
        pageNo: "",
        status: "",
        sort: "",
        sortType: "",
      },
      visible1: false,
      visible2: false,
      visible3: false,
      tableDataLength: 0,
      id: "", //品牌id
      ids:[],//品牌id数组
      brand:{
        ids:[],
        status:1
      }
    };
  },
  async created() {
    this.getBrandList(1);
  },
  methods: {
    //清空ids的数据
    changeIds(data){
      this.ids=data
    },
    //返回状态
    getstatus(status) {
      if (status === 1) {
        return "已收录";
      } else if (status === 0) {
        return "待收录";
      } else if (status === 2) {
        return "已拒绝";
      }
    },
    //按钮的收入
    async reciver() {
      if (this.selectedItems.length === 0) {
        this.$message.error("请选择要收录的品牌");
        return;
      } else if (this.selectedItems.length === 1) {
        if (this.selectedItems[0].status === 1) {
          this.$message.error("该品牌已收录");
          return;
        } else {
          this.selectedItems[0].status = 1;
          const res = await changeStatus(this.selectedItems[0]);
          if (res.status === 200) {
            this.$message.success("收录成功");
            // this.tableData.splice(this.selectedItems[0].index, 1);
            // this.tableDataLength = this.tableDataLength - 1;
            this.getBrandApplyList(this.form.pageNo);
          } else {
            this.$message.error("收录失败");
          }
        }
      } else if (this.selectedItems.length > 1) {
        this.brand.ids=this.ids
        const res= await batchChangeStatus(this.brand)
        if (res.status === 200) {
          this.$message.success("批量收录成功");
          // this.tableData.splice(this.selectedItems[0].index, this.selectedItems.length);
          // this.tableDataLength = this.tableDataLength - this.selectedItems.length;
          this.getBrandApplyList(this.form.pageNo);
          this.selectedItems = [];
          this.ids=[]
        } else {
          this.$message.error("批量收录失败");
        }
      }
    },
    //拒绝收录
    refuse(index, row) {
   
      this.clearSelection();
      this.selectedItems = [row];
      this.id = row.id;
      this.visible2 = true;
    },
    //收录品牌
    async reciverBrand(index, row) {
      this.selectedItems = row;
      this.selectedItems.status = 1;
      const res = await changeStatus(this.selectedItems);
      if (res.status === 200) {
        this.$message.success("收录成功");
        // this.tableData.splice(index, 1);
        // this.tableDataLength = this.tableDataLength - 1;
        this.getBrandApplyList(this.form.pageNo);
      } else {
        this.$message.error("收录失败");
      }
      // const res =await changeStatus(this.selectedItems[0])
    },
    //关闭弹窗
    handleClose3() {
      this.$emit("close3", false);
      this.$parent.ids=[];
    },
    //选择行
    handleSelectionChange(val) {
      this.clearSelection();
      this.selectedItems = val;
      console.log(this.selectedItems);
      this.ids=[]
      for (let i = 0; i < this.selectedItems.length; i++) {
        this.ids.push(this.selectedItems[i].id)
      }
      console.log(this.ids)
    },
    //打开拒绝弹窗
    openrefuseDialog() {
      if (this.selectedItems.length === 0) {
        this.$message.error("请选择要拒绝的品牌");
        return;
      } else if (this.selectedItems.length === 1) {
        this.visible2 = true;
      } else if (this.selectedItems.length > 1) {
        this.visible2 = true;
      }
    },
    //所有品牌分页
    handleCurrentChange(val) {
      this.form.pageNo = val;
      this.getBrandList(val);
      // this.getBrandApplyList(val);
    },
    //品牌申请
    handleCurrentChange2(val) {
      this.getBrandApplyList(val);
    },
    //添加品牌弹窗
    addBrand() {
      this.visible1 = true;
    },
    //关闭添加品牌弹窗
    handleClose() {
      this.$emit("close", false);
    },
    //关闭拒绝弹窗
    handleClose2() {
      this.$emit("close2", false);
    },
    handleClick(tab, event) {
      if (tab.name === "first") {
        this.form.brandName = "";
        this.getBrandList(1);
      } else if (tab.name === "second") {
        this.form.brandName = "";
        this.getBrandApplyList(1);
      }
    },
    //刷新
    refresh() {
      this.getBrandList(1);
    },
    //搜索1
    handleSearch1(data) {
      this.form.brandName=data
      this.form.pageNo = 1;
      this.getBrandList(1);
    },
    //搜索2
    handleSearch2(data) {
      this.form.brandName =data;
      this.form.pageNo = 1;
      this.getBrandApplyList(1);
    },
    //清空选中内容
    clearSelection() {
      this.selectedItems = [];
    },
    //编辑
    edit(index, row) {
      this.visible3 = true;
      this.selectedItems = [row];
    },
    //删除
    async deleted(index, row) {
      this.clearSelection();
      this.selectedItems = row;
      this.$confirm("此操作将永久删除该品牌, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
       .then(async () => {
          const res = await deleteBrand(this.selectedItems);
          console.log(res)
          if (res.status === 200) {
            this.$message.success("删除成功");
            // this.tableData.splice(index, 1);
            // this.tableDataLength = this.tableDataLength - 1;
            this.getBrandList(this.form.pageNo);
          } else {
            this.$message.error("删除失败");
          }
        })
       .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    //获取品牌列表(status:1)
    async getBrandList(pageNo) {
      this.form.pageNo = pageNo;
      this.form.status = 1;
      const res = await getbrandslist(this.form);
      if (res.status === 200) {
        this.tableData = res.data.result.records;
        this.choosedItem = res.data.result.records;
        this.tableDataLength = res.data.result.total;
      } else {
        this.$message.error(res.msg);
      }
    },
    //获取品牌列表(status:2 在申请的)
    async getBrandApplyList(pageNo) {
      this.form.pageNo = pageNo;
      this.form.status = 2;
      const res = await getbrandslist(this.form);
      if (res.status === 200) {
        this.tableData = res.data.result.records;
        //this.selectedItems = res.data.result.records;
        this.tableDataLength = res.data.result.total;
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>
  
  <style scoped>
.el-icon-arrow-right:before {
  content: "\e784";
}

.btn1 {
  position: absolute;
  right: 30px;
  opacity: 1;
  border-radius: 80px;
  width: 130px;
  height: 38px;
  color: white;
  font-size: 15px;
  background: rgba(126, 114, 242, 1);
}

.btn2 {
  position: absolute;
  right: 180px;
  opacity: 1;
  border-radius: 80px;
  width: 130px;
  height: 38px;
  color: white;
  font-size: 15px;
  background: rgba(126, 114, 242, 1);
}
/* 图片样式 */
.img-box {
  left: 292px;
  top: 207px;
  width: 102px;
  height: 70px;
  opacity: 1;
  border-radius: 5px;
}
.edit {
  width: 13.2px;
  height: 14px;
  position: relative;
  margin-left: 28px;
  top: 2px;
}

.delete {
  width: 13.2px;
  height: 16px;
  position: relative;
  top: 3px;
  margin-left: 28px;
  margin-right: 3px;
}
:deep(.el-tabs__nav-wrap::after) {
    height: 0px !important;
}
</style>